<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<title>数据表格 datagrid</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
<script type="text/javascript">
	//定义全局变量，标记当前是否为 编辑状态
	var currIndex;
	$(function() {
		
		$("#grid").datagrid({
			columns : [ [ {
				field : 'id',
				title : '编号',
				width : 100,
				editor:{
					type:'validatebox',
					options:{
						required:true
					}
				}
			}, {
				field : 'name',
				title : '名称',
				width : 200,
				editor:{
					type:'validatebox',
					options:{
						required:true
					}
				}
			}, {
				field : 'price',
				title : '价格',
				width : 100,
				editor:{
					type:'validatebox',
					options:{
						required:true
					}
				}
			} ] ],
			toolbar : [ {
				text : '新增',
				iconCls : "icon-add",
				handler : function() {
					$("#grid").datagrid('insertRow',{
							index: 0,	// index start with 0
						  	row: {}
					});
					$("#grid").datagrid('beginEdit',0);
					currIndex = 0;
				}

			}, {
				text : '编辑',
				iconCls : "icon-edit",
				handler : function() {
					if(currIndex != undefined){
						return;
					}
					var row = $("#grid").datagrid("getSelected");
					var index = $("#grid").datagrid("getRowIndex",row);
					$("#grid").datagrid('beginEdit',index);
					currIndex = index;
				}

			}, {
				text : '保存',
				iconCls : "icon-save",
				handler : function() {
					$("#grid").datagrid('endEdit',currIndex);
					currIndex = undefined;
				}

			}, {
				text : '取消',
				iconCls : "icon-cancel",
				handler : function() {
					$("#grid").datagrid('cancelEdit',currIndex);
					currIndex = undefined;
				}

			} ],
			url : 'product.json',
			singleSelect : true
		});
		
	})
</script>
</head>
<body>
	<table id="grid"></table>
</body>
</html>